#@layout()
#define head()
<script type="text/javascript" src="#(CONTEXT_PATH??)/static/js/vue.min.js" ></script>
<script>
	var app = null;
	var h = $(window).height();
	$(function(){
		$("#app").css("height",h-120+"px")
		try{
		app = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello Vue!',
			    items:[],
			    user:#(user??)
			  },
			  methods:{
				  all_money: function () {
					var money = 0;
				    for(var i = 0;i<this.items.length;i++){
				    	money += this.items[i].amount * this.items[i].price;
				    }
				    return money;
				},
				zhekou_money : function(){
					var money = this.all_money();
					if(this.user.score>=100){
						money *= 0.9;
					}
					return money.toFixed(2);
				},
				delObj:function(obj){
					for(var i=0;i<this.items.length;i++){
						var o = this.items[i];
						if(o.goods_id == obj.goods_id){
							this.items.splice(i,1);
							console.log('ok');
							return;
						}
					}
				}
			},
	        watch:{
	            'items':{
	                handler:function(newValue,oldValue){
	                    console.log(newValue)
	                    $.post('#(CONTEXT_PATH??)/m/updateCartItems', {data:JSON.stringify(app.items)}, function(data) {
	            			console.log(data)
	            		});
	                },
	                deep:true,
	            }
	        }
		});
		}catch(eee){
			$.toast(eee, "text");
		}
		$.post('#(CONTEXT_PATH??)/m/cartItems', {}, function(data) {
			app.items = data;
		});
	});

	function afterScan(data){
		$.post('#(CONTEXT_PATH??)/goods/detail?id='+data, {}, function(data) {
			var has = false;
			for(var i=0;i<app.items.length;i++){
				var o = app.items[i];
				console.log(o);
				if(o.goods_id == data.id){
					has = true;
					o.amount += 1;
					return;
				}
			}
			if(!has){
				app.items.push({
					goods_id:data.id,
					name:data.name,
					img:data.img,
					price:data.price,
					amount:1,
					money:data.price
				})
			}
			
			resaveCart();
		});
	}
	
	//同步购物车到数据库
	function resaveCart(){
		$.post("#(CONTEXT_PATH??)/m/updateCartItems",{data:JSON.stringify(app.items)},function(data){
			$.toast("操作成功", "text");
		});
	}
	
	function scan(){
		//xhjs.scan();
		afterScan(3);
	}
</script>
#end

#define content()
<div id="app" class="weui-cells " style="width:100%;overflow-y:auto;">
<!-- 
<a href="javascript:scan();" class="weui-btn weui-btn_primary btn">扫码购买</a>
 -->
<br>

<form id="editForm"  action=""  style="width:100%">
	
	<table  class="layui-table">
		<tr style="font-weight: bold;">
			<td>图片</td>
			<td>名称</td>
			<td>数量</td>
			<td>价格</td>
			<td>总价</td>
			<td>操作</td>
		</tr>
	  	
	  	<tr v-for="g in items">
	  		<td style="width:30%;">
	  		<img v-bind:src="'#(CONTEXT_PATH??)/upload/temp/'+g.img" style="max-width: 30%;max-height: 250px;" />
	  		</td>
	  		<td>{{g.name}}</td>
	  		<td>
	  			<input type="hidden" name="goods_id" value="{{g.id}}" />
	  			<input type="text" v-bind:id="'amount'+g.id"  name="amount" style="width:50px;height: 35px;" v-model="g.amount" />
	  		</td>
	  		<td>
	  			<input type="text" v-bind:id="'goods_price'+g.id" name="goods_price" style="width:50px;height: 35px;" disabled="disabled"  v-model="g.price"/>
	  		</td>
	  		<td>
	  			<input type="text" v-bind:id="'goods_money' + g.id" name="goods_money" disabled="disabled" style="width:50px;height: 35px;" v-model="g.amount*g.price"/>
	  		</td>
	  		<td>
	  			<input type="button" v-on:click="delObj(g)" value="删除" />
	  		</td>
	  	</tr>
  	</table>
  	<div >总金额：{{all_money()}}元 <span v-if="user.is_vip">折扣价：{{zhekou_money()}}元</span></div>
  <a href="javascript:submitData();" class="weui-btn weui-btn_primary btn">支付购买</a>
</form>
</div>
  <script>
  function submitData(){
	  if(app.items.length==0){
		  $.toast("购物车为空！", "text");
		  return;
	  }
      $.post('#(CONTEXT_PATH)/m/saveOrder',{},function(data) {
		app.items = [];
		$.toast("购买完成！", "text");
     });
	}

  </script>
#end
